<template>
	<view class="body">
		<CommonHeader />
		<view class="top">
			<view class="search">
				<image src="@/static/node/search.png" mode="aspectFill" />
				<input type="text" placeholder="可通过DN和备注进行检索" />
			</view>
		</view>
		<view class="content">
			<view class="menu">
				<view class="menu-list select">全部(11)</view>
				<view class="menu-list">正常(11)</view>
				<view class="menu-list">异常(11)</view>
				<view class="menu-list">已下架(11)</view>
			</view>
			<view class="node-list">
				<view class="node-item" v-for="(item, index) in 11" :key="index">
					<view class="dn">
						<view class="title">DN：SAXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXSSSSS</view>
						<image src="@/static/node/copy.png" mode="aspectFill" />
					</view>
					<view class="middle">
						<view class="left">
							<view class="status">
								<view class="status-item">
									<view class="status-title">设备状态</view>
									<view class="status-value green">在线</view>
								</view>
								<view class="status-item">
									<view class="status-title">管理线</view>
									<view class="status-value red">离线</view>
								</view>
								<view class="status-item">
									<view class="status-title">山西联通</view>
								</view>
							</view>
							<view class="band">
								<view class="band-item">
									<view class="band-title">昨日带宽</view>
									<view class="band-value">501M/600M</view>
								</view>
								<view class="band-item">
									<view class="band-title">在线条数</view>
									<view class="band-value">40/60</view>
								</view>
							</view>
						</view>
						<view class="right income">
							<view class="line"></view>
							<view class="income-item">
								<view class="income-value">60.88</view>
								<view class="income-title">昨日收益</view>
							</view>
						</view>
					</view>
					<view class="remark">
						<view class="message">备注：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</view>
						<image src="@/static/node/remark.png" mode="aspectFill" />
					</view>
				</view>
				<view class="none" style="display: none;">
					<image src="@/static/node/none.png"/>
				</view>
			</view>

		</view>
	</view>
	
</template>

<script setup>
import CommonHeader from '@/components/CommonHeader.vue'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { checkLogin } from '@/utils/auth'
import { showToast } from '@/utils/auth';


onLoad(() => {
    //登录验证
    checkLogin()
})
onShow(() => {
  // 触发数据变化或强制刷新
})
</script>

<style lang="scss">
	.body {
		height: 100vh;
		background-color: #F8F8F8;
		position: relative;
	}
	.top {
		position: absolute;
		top: 83.35rpx;
		left: 80rpx;
		background-color: #fff;
		border-radius: 32.5rpx;
		.search{
			display: flex;
			padding: 12rpx 0 12rpx 21.35rpx;
			font-size: 22rpx;
			image{
				width: 35.94rpx;
				height:40.1rpx;
				padding-right: 17rpx;
			}
			input{
				flex: 1;
				font-size: 22rpx;
				width: 260rpx;
				padding-right: 20rpx;
			}
		}
	}
	.content {
		position: absolute;
		top: 193rpx;
		width: 750rpx;
		background-color: #F8F8F8;
		border-radius: 15rpx 15rpx 0 0;

		.menu{
			border-radius: 15rpx 15rpx 0 0;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 10rpx;
			.menu-list{
				padding: 23rpx 15rpx;
				color: #8E8E8E;
				font-size: 33rpx;
			}
			.select{
				color: #332C2B;
				border-bottom: 2px solid #288EFF;
			}
		}

		.node-list{
			margin: 26rpx 17rpx;
			height: calc(100vh - 350rpx);
			overflow-y: scroll;
			.node-item{
				background-color: #fff;
				border-radius: 15rpx;
				margin-bottom: 15rpx;
				padding:26rpx 21rpx 14rpx 47rpx;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09);
				.dn{
					display: flex;
					.title{
						font-size: 25rpx;
						width: 468rpx;
						white-space: nowrap; /* 防止文本换行 */
						overflow: hidden; /* 隐藏溢出的文本 */
						text-overflow: ellipsis; /* 显示省略号 */
						color: #2C2C2C;
					}
					image{
						padding-left: 46rpx;
						width: 28.13rpx;
						height: 28.13rpx;
					}

				}
				.middle{
						display: flex;
						justify-content: space-between;
					.left{
						.status{
							display: flex;
							.status-item{
								font-size: 25rpx;
								display: flex;
								align-items: center;
								padding-right: 38rpx;
								.status-value{
									color:#fff;
									padding: 5rpx 6rpx;
									border-radius: 25rpx;

								}
								.status-title{ 
									color:#332C2B;
									padding-right: 7.29rpx;
								}
								.red{
									background-color: #E5695F;
								}
								.green{
									background-color: #22AC38;

								}
							}	
							.status-item:last-child{
								padding-right: 20rpx;
							}
						}
						
						.band{
							display: flex;
							.band-item{
								display: flex;
								font-size: 25rpx;
								padding-right: 37rpx;
								.band-value{
									color: #2C2C2C;
								}
								.band-title{
									color: #8E8E8E;
									padding-right: 10rpx;
								}
							}
						}

						
					}

					.income{
						display: flex;
						align-items: center;
						.line{
							height:56.61rpx;
							width: 1px;
							background-color: #2C2C2C;
						}
						.income-item{
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							padding-left: 21rpx;
							.income-value{
								color: #FB551C;
								font-size: 35rpx;
								font-weight: bold;
							}
							.income-title{
								color: #332C2B;
								font-size: 25rpx;
							}
						}
					}
				}

				.remark{
					display: flex;
					.message{
						width: 468rpx;
						font-size: 22rpx;
						white-space: nowrap; /* 防止文本换行 */
						overflow: hidden; /* 隐藏溢出的文本 */
						text-overflow: ellipsis; /* 显示省略号 */
						color: #909090;
					}
					image{
						width: 28.13rpx;
						height: 28.13rpx;
						padding-left: 46rpx;
					}
				}
			}

			.node-item:last-child{
				margin-bottom: 0;
			}

			.none{
				height: calc(100vh - 450rpx);
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 300rpx;
					height: 300rpx;
				}
			}
		}
	}
</style>
